<template>
  <div class="box">
    <p style="margin-bottom: 10px;display: flex;flex-direction: row-reverse;">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </p>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="2">
        <template slot="title">
          <div class="firstCar">
            <span>交易信息</span>
            <!-- null //状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑 -->
            <span @click="viewgoto">查看订单详情</span>
          </div>
        </template>

        <el-row v-if="data.outTime" style="padding-left:30px" :gutter="20">
          <el-col
            :span="2"
          ><span style="font-weight:700">基础信息</span></el-col>
          <el-col
            :span="4"
          ><span>下架时间 : {{ data.outTime }}</span></el-col>
          <el-col
            :span="4"
          ><span>下架原因 :
            {{
              data.childrenStatus == '402'?'已售出':
              data.cancelCode == "101"
                ? "卖家48小时未确认"
                : data.cancelCode == "102"
                  ? "买家48小时未确认"
                  : data.cancelCode == "103"
                    ? "卖家车辆已售"
                    : data.cancelCode == "104"
                      ? "卖家车辆暂不出售"
                      : data.cancelCode == "105"
                        ? "检测下单失败"
                        : data.cancelCode == "106"
                          ? "车辆存在事故情况"
                          : data.cancelCode == "107"
                            ? "车辆存在火烧情况"
                            : data.cancelCode == "108"
                              ? "车辆存在水泡情况"
                              : data.cancelCode == "110"
                                ? "自主下架"
                                : data.cancelCode == "111"
                                  ? "拉黑"
                                  : ""
            }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="2"
          ><span style="font-weight:700">订单信息</span></el-col>
          <el-col
            :span="4"
          ><span>交易类型 :
            {{
              data.transactionType == 0
                ? "本地购车"
                : data.transactionType == 1
                  ? "异地购车"
                  : ""
            }}</span></el-col>
          <el-col
            :span="4"
          ><span>购车方式 :
            {{
              data.buyWay == 0
                ? "安心购车"
                : data.buyWay == 1
                  ? "简易购车"
                  : ""
            }}</span></el-col>
          <el-col
            :span="4"
          ><span>创建时间 : {{ data.createTime }}</span></el-col>
          <el-col
            :span="4"
          ><span>车辆交易订单编号 : {{ data.orderNo }}</span></el-col>
          <el-col
            :span="4"
          ><span>订单状态 :
            {{
              data.processStep == 301
                ? "车辆检测"
                : data.processStep == 302
                  ? "购车签约"
                  : data.processStep == 303
                    ? "车辆交接"
                    : data.processStep == 304
                      ? "提档过户"
                      : ""
            }}</span></el-col>
        </el-row>
        <!-- //流程步骤：301-车辆检测、302-购车签约、303-车辆交换、304-提档过户 -->

        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="2"><span style="font-weight:700">卖方</span></el-col>
          <el-col
            :span="4"
          ><span>联系人 : {{ data.seller }}</span></el-col>
          <el-col
            :span="4"
          ><span>联系电话 : {{ data.sellerMobile }}</span></el-col>
        </el-row>

        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="2"><span style="font-weight:700">买方</span></el-col>
          <el-col
            :span="4"
          ><span>联系人 : {{ data.buyer }}</span></el-col>
          <el-col
            :span="4"
          ><span>联系电话 : {{ data.buyerMobile }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌地 : {{ data.buyerSpCity }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item name="3">
        <template slot="title">
          <div class="firstCar">
            <span>车辆基础信息</span>
            <!-- null //状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑 -->
            <span @click="gotourlfrom('车辆基础信息')">车辆详情</span>
          </div>
        </template>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="8"
          ><span>车辆识别代号/VIN : {{ getBasicInfo.vin }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌时间 : {{ getBasicInfo.spTime }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌城市 : {{ getBasicInfo.spCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>所在城市 : {{ getBasicInfo.vehicleCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>是否首任车主 : {{ getBasicInfo.firstMaster ? "是" : "否" }}</span></el-col>
          <el-col
            :span="8"
          ><span>品牌车系 : {{ getBasicInfo.brandModel }}</span></el-col>
          <!-- //使用性质:0-非运营，1-运营，2-营转非，3-租赁，4-教练 -->
          <el-col
            :span="4"
          ><span>使用性质 :
            {{
              getBasicInfo.useNature == 0
                ? "非运营"
                : getBasicInfo.useNature == 1
                  ? "运营"
                  : getBasicInfo.useNature == 2
                    ? "营转非"
                    : getBasicInfo.useNature == 3
                      ? "租赁"
                      : getBasicInfo.useNature == 4
                        ? "教练"
                        : ""
            }}</span></el-col>
          <el-col
            :span="4"
          ><span>过户次数 : {{ getBasicInfo.assignedNum }}</span></el-col>
          <el-col
            :span="4"
          ><span>车辆是否有抵押 :
            {{ getBasicInfo.isPledge == 0 ? "否" : "是" }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      data: {},
      checked1: false,
      checked2: false,
      getBasicInfo: {},
      getVehicleCondition: {},
      getVehicleImage: {},
      getVehicleSaleInfo: {}
    }
  },
  async created() {
    await this.inquire()
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    gotourlfrom(text) {
      if (text === '车辆基础信息') {
        this.$router.push(
          '/carAdmin/putawayList?carInfoId=' + this.$route.query.carInfoId
        )
      }
    },
    viewgoto() {
      // 安心
      if (this.data.buyWay == 0) {
        this.$router.push(
          `/orderCenter/details/processDetail?id=${
            this.data.vehicleOrderId
          }&userId=${this.data.buserId}&sellId=${this.data.suserId}`
        )
      }
      if (this.data.buyWay == 1) {
        this.$router.push(
          `/orderCenter/details/simpleDetail?id=${
            this.data.vehicleOrderId
          }&userId=${this.data.buserId}&sellId=${this.data.suserId}`
        )
      }
    },
    inquire() {
      // 上架车辆详情
      this.$get(
        '/web/vehicleInfo/getVehicleTradeInfo?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.data = res.data.data
          this.checked1 = res.data.data.sourceTrade
          this.checked2 = res.data.data.destinationTrade
        }
      })
      // 车辆基础信息
      this.$get(
        '/web/vehicleInfo/getBasicInfo?carInfoId=' + this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getBasicInfo = res.data.data
        }
      })
      //   // 车辆车况描述
      //   this.$get(
      //     '/web/vehicleInfo/getVehicleCondition?carInfoId=' +
      //       this.$route.query.carInfoId
      //   ).then(res => {
      //     if (res.data.code === '0') {
      //       this.getVehicleCondition = res.data.data
      //     }
      //   })
      //   // 车辆相关图片信息
      //   this.$get(
      //     '/web/vehicleInfo/getVehicleImage?carInfoId=' +
      //       this.$route.query.carInfoId
      //   ).then(res => {
      //     if (res.data.code === '0') {
      //       this.getVehicleImage = res.data.data
      //     }
      //   })
      //   // 车辆交车设置/出售信息
      //   this.$get(
      //     '/web/vehicleInfo/getVehicleSaleInfo?carInfoId=' +
      //       this.$route.query.carInfoId
      //   ).then(res => {
      //     if (res.data.code === '0') {
      //       this.getVehicleSaleInfo = res.data.data
      //     }
      //   })
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  // padding: 20px;
  margin: 30px;
  border-left: 1px solid #e6ebf5;
  border-right: 1px solid #e6ebf5;
  .el-range-separator{
    width: 7%;
  }
  .firstCar {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .el-collapse-item__header {
    padding-left: 20px;
  }
}
</style>
